<template>
    <div style="background-color:#000; width: 100%; height: 1000px">
        <section class="jumbotron text-center">
            <div id="table1" style="width: 100%;height:800px;"></div>
        </section>
    </div>
</template>

<script>
  import * as echarts from "echarts";
  // eslint-disable-next-line no-unused-vars
  import wordCloud from '../../utils/wordcloud'
  import {apiDefaultErrorHandler} from "../../api/base";
  import welcomeApi from "../../api/operation/welcome";

  export default {
    name: "welcome",
    data() {
      return {
        cloudData: [] // 云朵图数据
      };
    },
    mounted() {
      this.queryAllCloudText()
    },
    methods: {
      startTable1() {
        let myChart = echarts.init(document.getElementById('table1'), 'dark');
        let data = this.cloudData.slice()
        console.log("查询出来的结果:" + this.cloudData.length)

        let option = {
          backgroundColor: '#000000',
          tooltip: {
            trigger: 'item',
            padding: [10, 15],
            textStyle: {
              fontSize: 20
            },
            formatter: params => {
              const {name, comment, value} = params

              return `
                   ${name} <br/>
                   ${comment} <br/>
                   ${value}
                `
            }
          },
          series: [{
            type: 'wordCloud',
            gridSize: 30,
            sizeRange: [15, 63],
            rotationRange: [0, 0],
            shape: 'circle',
            textStyle: {
              normal: {
                color: this.randColor()
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: data
          }]
        };

        myChart.on('updateAxisPointer', function (event) {
          let xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            let dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });

        myChart.setOption(option);
      },

      // 随机颜色
      randColor() {
        let r = 100 + ~~(Math.random() * 100);
        let g = 135 + ~~(Math.random() * 100);
        let b = 100 + ~~(Math.random() * 100);
        return `rgb(${r}, ${g}, ${b})`
      },
      /**
       * 查询所有云朵图数据
       */
      queryAllCloudText() {
        welcomeApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.cloudData = data.list
            this.startTable1()
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
      }
    }
  }
</script>

<style scoped>

</style>